<template>
    <vol-box
        :title="title"
        v-model="dialogVisible"
        :width="500"
        :draggable="true"
        :on-model-close="closeDialog"
    >
        <template #content>
            <div>
                <div>
                    <div class="title">选择的审批数据：</div>
                    <span
                        v-for="(item, index) in selectionData"
                        class="span-style"
                    >
                        {{ `(${index + 1})${item['姓名']}` }}
                    </span>
                </div>
                <div style="margin-top: 16px;">
                    <div class="title">审批人：</div>
                    <div
                        v-for="(item, index) in approvalNode"
                    >
                        <div style="display: flex; align-items: center;">
                            <span>{{ `${item.nodeName}${index + 1}：` }}</span>
                            <el-select
                                v-model="item.approvalUser"
                                placeholder="请选择审批人"
                                clearable
                                style="width: 220px;"
                            >
                                <el-option
                                    v-for="item in approvalUserOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                            <el-button
                                v-if="index === 0"
                                type="primary"
                                @click="addNodeBtn"
                                style="margin-left: 12px;"
                            >
                                添加节点
                            </el-button>
                            <el-button
                                v-if="index > 0"
                                type="danger"
                                @click="removeNodeBtn(index)"
                                style="margin-left: 12px;"
                            >
                                删除节点
                            </el-button>
                        </div>
                        <div v-if="index < approvalNode.length - 1">
                            <el-icon class="el-icon--right"><Bottom /></el-icon>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template #footer>
            <div>
                <el-button
                    @click="closeDialog"
                >
                    关闭
                </el-button>
                <el-button
                    type="primary"
                    @click="doBtn"
                >
                    确定
                </el-button>
            </div>
        </template>
    </vol-box>
</template>
  
<script setup>
import { ref } from 'vue'
import VolBox from '@/components/basic/VolBox.vue'
import http from '@/api/http'
import { ElMessage } from 'element-plus'
import {
    Bottom
} from '@element-plus/icons-vue'

// 变量
const tag = ref(null)
const title = ref('')
const dialogVisible = ref(false)
const selectionData = ref([])
const approvalUserOptions = ref([])
const approvalNode = ref(
    [
        {
            nodeName: '节点',
            approvalUser: ''
        }
    ]
)

// 函数
const emits = defineEmits(['success'])
defineExpose(
    {
        open
    }
)

function open(parameter) {
    title.value = parameter.title
    selectionData.value = parameter.selectionData
    getSysUser()
    dialogVisible.value = true
}

function closeDialog() {
    // emits('success')
    dialogVisible.value = false
}

function getSysUser() {
    approvalUserOptions.value = []
    const params = {
        order: 'desc',
        page: 1,
        rows: 10000,
        sort: 'User_Id'
    }
    http.post('/api/Sys_User/getPageData', params).then(res => {
        for (const item of res.rows) {
            if (item.Enable) {
                approvalUserOptions.value.push(
                    {
                        label: item.UserTrueName,
                        value: item.User_Id
                    }
                )
            }
        }
    }).catch(error => {
        console.log(error)
    })
}

function addNodeBtn() {
    approvalNode.value.push(
        {
            nodeName: '节点',
            approvalUser: ''
        }
    )
}

function removeNodeBtn(index) {
    approvalNode.value.splice(index, 1)
}

function doBtn() {
    for (const item of approvalNode.value) {
        if (!item.approvalUser) {
            ElMessage({
                message: '请选择审批人！',
                type: 'warning'
            })
            return
        }
    }
    console.log('selectionData', selectionData.value)
    console.log('approvalNode', approvalNode.value)
}
</script>
  
<style lang="less" scoped>
.title {
    color: black;
    margin-bottom: 16px;
}

.span-style {
    color: #409EFF;
}
</style>
